import React, {
  Component
} from 'react';
import {
  Text,
  Navigator,
  TouchableHighlight,
  StyleSheet,
  Animated,
  View,
} from 'react-native';

import OrderFragment from './orderFragment';
import CLNavigatorHeader from '../../component/CLNavigatorHeader';

import styles from './styles.js';
import themeconfig from '../../config/theme';
import { TabViewPagerPan, TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

const order2 = () => <OrderFragment orderState="2" tabLabel='待配送'/>;
const order3 = () => <OrderFragment orderState="3" tabLabel='已配送'/>;
const order7 = () => <OrderFragment orderState="7" tabLabel='已完成'/>;
const order6 = () => <OrderFragment orderState="6" tabLabel='已取消'/>;
// const order10 = () => <OrderFragment orderState="10" tabLabel='扫码'/>;

export default class OrderMain extends Component {

  static navigationOptions = ({navigation, screenProps}) => {
    let header = (<CLNavigatorHeader navigation={navigation} title="订单"/>);
    return {header}
  };

  // componentDidMount(){
  //     const orderIndex = this.props.orderIndex;
  //     this.setState({index:orderIndex})
  // }

  state = {
    index: 0,
    routes: [
    { key: '1', title: '待配送' },
    { key: '2', title: '已配送' },
    { key: '3', title: '已完成' },
    { key: '4', title: '已取消' },
    // { key: '5', title: '扫码' },
    ],
  };
 
  _handleIndexChange = index => {
    this.setState({ index })
  };

  _renderLabel = props => ({ route, index }) => {
    const inputRange = props.navigationState.routes.map((x, i) => i);
    const outputRange = inputRange.map(
      inputIndex => (inputIndex === index ? themeconfig.maincolor : 'gray')
    );
    const color = props.position.interpolate({
      inputRange,
      outputRange,
    });

    return (
      <Animated.Text style={[styles.label, { color }]}>
        {route.title}
      </Animated.Text>
    );
  };
 
  _renderHeader = props => <TabBar  
      indicatorStyle={styles.indicator}
      style={styles.tabbar}
      renderLabel={this._renderLabel(props)}
      labelStyle={styles.label}  
      {...props} 
  />;
 
  _renderScene = SceneMap({
    '1': order2,
    '2': order3,
    '3': order7,
    '4': order6,
    // '5': order10,
  });

  _renderPager = props => <TabViewPagerPan 
    swipeEnabled = {false}
    {...props} 
  />;

  render() {
    const colorProps = {
      titleColor: 'white',
    }
    
    return (
      <View style={styles.naviTopPadding}>
        <TabViewAnimated
          style={styles.container}
          tabStyle={{backgroundColor:"white"}}
          indicatorStyle={{backgroundColor:"white"}}
          navigationState={this.state}
          renderScene={this._renderScene}
          renderPager={this._renderPager}
          renderHeader={this._renderHeader}
          onIndexChange={this._handleIndexChange}
        />
      </View>
    );
  }
}
